<template>
	<view>
<!-- 		<uni-nav-bar>
			<u-tabs :list="list1" @click="clickTab" :scrollable="false"></u-tabs>
		</uni-nav-bar> -->
		<view>
			<up-input placeholder="请输入完整主题标题" border="bottom" v-model="value" @change="change"></up-input>
		</view>
		<!-- <u-divider></u-divider> -->
		<view class="text-textarea">
			<u--textarea v-model="value1" placeholder="请输入正文" border="none">
			</u--textarea>
			<view class="ccc">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" :previewFullImage="true"></u-upload>
			</view>

		</view>
		<view class="bottom-sumit">
			<view class="bottom-sumit-text" @click="release(e)">
				发布
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	//导入新增帖子接口
	import {
		addPost
	} from '@/api/tiezi/post'
	// const list1 = ref([{
	// 		name: '帖子',
	// 	},
	// 	{
	// 		name: '主题',
	// 	}
	// ])
	// const current = ref(0)
	// const clickTab = ((e)=>{
	// 	console.log(e,'999')
	// 	current.value=e.index
	// })
	const value = ref(''); //帖子标题
	const value1 = ref(''); //帖子内容

	const fileList1 = ref([]); //空数组作为响应式的文件列表,显示已上传的文件列表

	// 删除图片(当点击删除按钮时，触发 deletePic 方法来删除对应的文件。)
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片(即用户选择完文件后,触发 afterRead 方法。)
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: '', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};

	function change() {

	}
	//点击发布，即（发布帖子）
	function release(e) {
		console.log(e, 'eeeeeeeeeeee')

	}
</script>

<style lang="scss" scoped>
	.text-textarea {
		margin-top: 20rpx;
	}

	//CSS深度查询
	:deep(.u-textarea) {
		background-color: rgba(242, 242, 242, 1);
	}

	.ccc {
		padding: 20px;
	}

	.bottom-sumit {
		position: fixed;
		bottom: 150rpx;
		background-color: rgba(255, 255, 255, 1);
		width: 100%;

		.bottom-sumit-text {
			width: auto;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 36rpx;
			background-color: rgba(255, 98, 0, 1);
			color: rgba(255, 255, 255, 1);
			margin: 18rpx 40rpx;
		}
	}
	:deep(.uni-navbar){
		display: flex;
		background-color: #fff;
		justify-content: center;
	}
</style>